<template>
  <div style="padding: 10px;" v-loading="loading">
    <el-steps :space="350" :active="step" finish-status="success" center>
      <el-step title="订单创建"></el-step>
      <el-step title="订单付款"></el-step>
    </el-steps>
  
    <el-row v-if="step==1" :gutter="40" class="payment">
      <el-col v-if="!isBalanceEnough" :span="24">
        <div class="h2 mgb20">账户可用额度不足，请充值。</div>
      </el-col>
      <el-col :span="12">
        <div class="box box-bordered">
          <h3>账户信息</h3>
          <div class="box-body">
            <div class="display-item">
              <span class="label">账户余额:</span>
              <span>{{balance.balance/100 | currency('￥')}}</span>
            </div>
            <div v-if="balance.credit>0" class="display-item">
              <span class="label">信用额度:</span>
              <span>{{balance.credit/100 | currency('￥')}}</span>
            </div>
            <div class="display-item">
              <span class="label">可用额度:</span>
              <span class="highlight">{{available/100 | currency('￥')}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="box box-bordered">
          <h3>订单信息</h3>
          <div class="box-body">
            <div class="display-item">
              <span class="label">订单编号:</span>
              <span>{{order.orderNumber}}</span>
            </div>
            <div class="display-item">
              <span class="label">渠道单号:</span>
              <span>{{order.channelOrderNumber | placeholder('-')}}</span>
            </div>
            <div class="display-item">
              <span class="label">订单总价:</span>
              <span class="highlight">{{order.total/100 | currency('￥')}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="pay-btn">
          <el-button v-if="isBalanceEnough" type="primary" size="large" @click="payOrder()">确认付款</el-button>
        </div>
      </el-col>
    </el-row>

    <div v-if="step==2" class="success">
      <span class="h1">订单 {{order.orderNumber}} 已经提交，预计出票时间为3分钟</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Orders, Balance } from '@/store/api'
export default {
  created() {
    axios.all([Orders.getOrder(this.$route.params.orderNumber), Balance.get()])
      .then(axios.spread((order, balance) => {
        this.order = order
        this.balance = balance
        this.loading = false
      }))
  },
  computed: {
    available: function () {
      return this.balance.balance + this.balance.credit
    },
    isBalanceEnough: function () {
      return this.available - this.order.total >= 0
    }
  },
  data() {
    return {
      loading: true,
      step: 1,
      order: {},
      balance: {}
    }
  },
  methods: {
    payOrder() {
      Orders.payOrder(this.order.orderNumber).then((order) => {
        this.order = order
        this.step = 2
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.payment {
  margin-top: 10px;
  padding: 30px;
}

.box {
  min-height: 113px;
}

.pay-btn {
  margin-top: 26px;
  text-align: right;
  button {
    width: 146px;
  }
}

.success {
  height: 300px;
  line-height: 300px;
  text-align: center;
  span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }
}
</style>
